<template>
  <n-card :bordered="false" class="proCard">
    <div class="mt-4">
      <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8">
        <n-grid-item v-for="(item, index) in devices" :key="index">
          <NCard content-style="padding-top: 0;" size="small" :bordered="false">
            <template #footer>
              <n-skeleton v-if="loading" size="medium" />
              <div class="cursor-pointer" v-else>
                <p class="flex justify-center">
                  <span>
                    <n-icon :size="60" class="flex-1">
                      <component :is="ControlOutlined" @click="clickIcon(item.client_id)" />
                    </n-icon>
                  </span>
                </p>
                <p class="flex justify-center">
                  <span>{{ item.name }}</span>
                </p>
              </div>
            </template>
          </NCard>
        </n-grid-item>
        <n-grid-item>
          <NCard content-style="padding-top: 0;" size="small" :bordered="false">
            <template #footer>
              <n-skeleton v-if="loading" size="medium" />
              <div class="cursor-pointer" v-else>
                <p class="flex justify-center">
                  <span>
                    <n-icon :size="60" class="flex-1">
                      <component :is="PlusOutlined" @click="clickIcon('add')" />
                    </n-icon>
                  </span>
                </p>
                <p class="flex justify-center"><span>添加新设备</span></p>
              </div>
            </template>
          </NCard>
        </n-grid-item>
      </n-grid>
    </div>
  </n-card>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { PlusOutlined, ControlOutlined } from '@vicons/antd';
  import { useUser } from '@/store/modules/user';
  import { DeviceList, Params } from '@/api/water/device';

  const userStore = useUser();
  function clickIcon(e: any) {
    console.log(e);
  }

  const loading = ref<boolean>(true);
  const devices = ref<Array<any>>();
  const getDevices = (params?: Params): void => {
    DeviceList(params).then((res) => {
      devices.value = res.items;
    });
  };
  onMounted(() => {
    loading.value = false;
    if (userStore.getUserId) {
      getDevices({ user_id: userStore.getUserId });
    }
  });
</script>
